class App_20201024002552 {
	constructor( canvasId ) {
		this.cc = document.getElementById( canvasId ).getContext( "2d" );
			this.cc.canvas.onclick = location.reload.bind( location );
		this.flg = true;
		
		this.svcs = new Array();
			let svc = new SVC_20201024002552();

			let part1 = new SVC_Part_20201024002552( "part1" );
				part1.addJoint( "j1", 50, 50 );
			let part2 = new SVC_Part_20201024002552( "part2" );

			//build.
			part1.connect( "j1", part2 );
			
			part1.rotation = 3.14 / 8;
			part2.rotation = 0.1;
			

			svc.setTopPart( part1 );
			svc.calc();
			
			this.svcs.push( svc );
	}
	start() {
		if( 1 ) {
			this.draw( this.cc );
		}
		if( 0 ) {
			this.timerId = setInterval( function() {
				this.draw( this.cc );
				this.flg = ! this.flg;
			}.bind( this ), 500 );
		}
	}
	stop() {
		clearInterval( this.timerId );
	}
	draw( cc ) {
		for( let i = 0; i < this.svcs.length; i++ ) {
			let svc = this.svcs[ i ];
				svc.draw( cc );
		}
	}
}

class SVC_20201024002552 {
	constructor() {
		this.topPart = null;
	}
	setTopPart( topPart ) {
		this.topPart = topPart;

		//応急的
		topPart.parentJoint = {
			x : 0,
			y : 0,
		}
	}
	calc() {
		this.topPart.calc();
	}
	draw( cc ) {
		this.topPart.draw( cc );
	}
	
}

class SVC_Part_20201024002552 {
	constructor( title ) {
		this.title = title;
		this.ox = 0;
		this.oy = 0;
		this.jointHash = new Object();
		this.rotation = 0;
		this.abs = new Object();
		this.parent = null;
		this.parentJoint = null;
		this.children = new Array();
	}
	addJoint( name, x, y ) {
		let joint = new Object();
			joint.x = x;
			joint.y = y;
		this.jointHash[ name ] = joint;
	}
	connect( jointName, part ) {
		this.children.push( part );
		part.parent = this;
		part.parentJoint = this.jointHash[ jointName ];
	}
	calc() {
		if( this.parent == null ) {
			this.abs.rotation = this.rotation;
			this.abs.x = this.ox;
			this.abs.y = this.oy;
		} else {
			this.abs.rotation = this.parent.abs.rotation + this.rotation;
			let rx = this.parentJoint.x;
			let ry = this.parentJoint.y;
			let rotation = this.parent.rotation;
			let res = this.mathRotate( rx, ry, this.rotation );
			this.abs.x = this.parent.abs.x + res.X;
			this.abs.y = this.parent.abs.y + res.Y;
			console.log( this.abs.x, this.abs.y );
		}
		for( let i = 0; i < this.children.length; i++ ) {
			let child = this.children[ i ];
				child.calc();
		}
	}
	draw( cc ) {
		console.log( this.title + " draw." );
		cc.save();
			cc.rotate( this.abs.rotation );
			cc.strokeRect( this.abs.x, this.abs.y, 100, 100 );
		cc.restore();
		
		for( let i = 0; i < this.children.length; i++ ) {
			let child = this.children[ i ];
			child.draw( cc );
		}
	}
	//---
	mathRotate( x, y, theta2 ) {
		let theta1 = Math.atan2( y, x );
		let hankei = Math.sqrt( x * x + y * y );
		return {
			X : Math.cos( theta1 + theta2 ) * hankei,
			Y : Math.sin( theta1 + theta2 ) * hankei,
		}
	}
}